/**
 * @description 图层的显示
 * @author 大肘子
 */

import React, { FC, MouseEvent } from "react";
import { Typography, Button, Flex, Space, Tooltip } from "antd";
import { EyeInvisibleOutlined, EyeOutlined, LockOutlined, UnlockOutlined } from "@ant-design/icons";
import { compoentInfoType } from "../../../store/componentReducer";
import useGetComponentInfo_redux from "../../../hooks/useGetComponentInfo_redux";
import { useDispatch } from "react-redux";
import { changeSelectedId, toogleComponentLock, changeComponentHidden, moveComponent } from "../../../store/componentReducer";
import classNames from "classnames/bind";
import style from "./index.module.scss";

//引入拖拽组件
import SortTableContainer from "../../../components/SortTableContainer";
import SortTableItem from "../../../components/SortTableItem";

const CBN = classNames.bind(style);

const NoProp: FC = () => {
  return <div style={{ textAlign: "center" }}>暂无数据</div>;
};

const LayerList: FC = () => {
  const { selectedId, selectedComponent, componentList } = useGetComponentInfo_redux();
  const dispatch = useDispatch();
  function handleClick(e: MouseEvent, selectedId: string) {
    e.stopPropagation();
    dispatch(changeSelectedId(selectedId));
  }
  //锁定组件
  function lockCom() {
    dispatch(toogleComponentLock());
  }
  //显示隐藏组件
  function hiddenCom(e: MouseEvent, isHidden: boolean) {
    let flag = false;
    //当前组件被隐藏拉
    if (isHidden) {
      flag = false;
    } else {
      // 当前组件是显示状态
      flag = true;
    }
    dispatch(changeComponentHidden({ isHidden: flag }));
  }
  if (componentList.length == 0) return <NoProp></NoProp>;
  const id_componentList = componentList.map((item: compoentInfoType) => {
    return {
      ...item,
      id: item.fe_id,
    };
  });
  //获取拖拽时候的方法
  function onDragEnd(oldIndex: number, newIndex: number) {
    // console.log(oldIndex, newIndex);
    dispatch(moveComponent({ oldIndex, newIndex }));
  }
  return (
    <SortTableContainer items={id_componentList} onDragEnd={onDragEnd}>
      <div className={CBN("layerList")}>
        {componentList.map((c: compoentInfoType) => {
          //   定义classname
          const defaultclassname = CBN("layerItem");
          const selectedclassname = CBN("selected");
          const layerItemclassname = CBN({
            [defaultclassname]: true,
            [selectedclassname]: selectedId == c.fe_id,
          });
          return (
            <SortTableItem key={c.fe_id} id={c.fe_id}>
              <Flex
                style={{ margin: "5px 0" }}
                justify="space-between"
                className={layerItemclassname}
                onClick={(e) => {
                  handleClick(e, c.fe_id);
                }}
              >
                <Typography>{c.props.title}</Typography>
                <Space size="small">
                  <Tooltip title={c.ishidden ? "显示" : "隐藏"}>
                    <Button
                      type={!c.ishidden ? "default" : "primary"}
                      shape="circle"
                      icon={c.ishidden ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                      size="small"
                      onClick={(e) => {
                        hiddenCom(e, c.ishidden);
                      }}
                    />
                  </Tooltip>
                  <Tooltip title={c.islock ? "解锁" : "锁定"}>
                    <Button
                      type={!c.islock ? "default" : "primary"}
                      shape="circle"
                      icon={c.islock ? <UnlockOutlined /> : <LockOutlined />}
                      size="small"
                      onClick={lockCom}
                    />
                  </Tooltip>
                </Space>
              </Flex>
            </SortTableItem>
          );
        })}
      </div>
    </SortTableContainer>
  );
};

export default LayerList;
